<template>
  <div class="echarts-box">
    <div ref="myEchartsRef" :style="{ width: width + 'px', height: height + 'px' }"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
withDefaults(defineProps<{ width: number | string; height: number | string }>(), {
  width: 400,
  height: 400,
});
let myEcharts: echarts.ECharts | undefined;
const myEchartsRef = ref();
const initChart = () => {
  if (myEchartsRef.value) {
    myEcharts = echarts.init(myEchartsRef.value);
    console.log('====================================');
    console.log(myEcharts);
    console.log('====================================');
  }
};
const setOptions = () => {
  if (myEcharts) {
    myEcharts.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
      ],
    });
  }
};
defineExpose({
  setOptions,
});
onMounted(() => {
  initChart();
});
onUnmounted(() => {
  myEcharts?.dispose();
});
</script>
<style lang="scss" scoped></style>
